<template>
  <Layout>
    <section class="p-5 mb-5 bg-white">
      <el-form
        ref="queryForm"
        label-width="120px"
        class="flex flex-wrap"
        :model="query"
      >
        <el-form-item
          class="w-3/12"
          label="企业名称"
          prop="companyName"
        >
          <el-input v-model.trim="query.companyName" />
        </el-form-item>
        <el-form-item
          class="w-3/12"
          label="开票抬头"
          prop="companyTitle"
        >
          <el-input v-model.trim="query.companyTitle" />
        </el-form-item>
        <el-form-item
          class="w-3/12"
          label="开票状态"
        >
          <el-select v-model.trim="query.invoiceStatus">
            <el-option
              label="全部"
              :value="undefined"
            />
            <el-option
              v-for="item in dict.invoice_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="w-3/12"
          label="开票申请时间"
          prop="__dateRange$createFrom$createTo"
        >
          <el-date-picker
            v-model.trim="query.__dateRange$createFrom$createTo"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item
          class="w-3/12"
          label="发票类型"
          prop="type"
        >
          <el-select v-model.trim="query.type">
            <el-option
              label="全部"
              :value="undefined"
            />
            <el-option
              v-for="item in dict.invoice_type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleQuery({ num: 1 })"
          >
            查询
          </el-button>
          <el-button @click="handleReset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </section>
    <section>
      <el-table
        :data="data.records"
        border
      >
        <el-table-column
          label="发票类型"
          prop="type"
        >
          <template #default="{ row }">
            {{ row.type | getLabelByDict('invoice_type') }}
          </template>
        </el-table-column>
        <el-table-column
          label="企业名称"
          prop="companyName"
        />
        <el-table-column
          label="开票金额"
          prop="invoicePrice"
        >
          <template #default="{ row }">
            ￥ {{ row.price | filterPrice }}
          </template>
        </el-table-column>
        <el-table-column
          label="开票抬头"
          prop="companyTitle"
        />
        <el-table-column
          label="开票申请时间"
          prop="createdAt"
        />

        <el-table-column label="开票状态">
          <template #default="{ row }">
            <span>{{
              row.invoiceStatus | getLabelByDict('invoice_status')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <AuditModal
              v-if="canAudit(row)"
              :value="row"
              @resolve="() => $refs.invoiceModal.show()"
            >
              <el-button type="text">
                审核
              </el-button>
            </AuditModal>
            <div v-else>
              <DetailModal
                v-if="row.type == 2"
                :value="row"
              >
                <el-button type="text">
                  查看
                </el-button>
              </DetailModal>
              <a
                v-else
                :href="row.pdfUrl"
                class="theme-color"
                target="_blank"
              >查看</a>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="text-center py-4">
        <el-pagination
          v-model:current-page="query.num"
          background
          :total="data.total"
          @current-change="handleQuery"
        />
      </div>
    </section>
    <InvoiceModal
      ref="invoiceModal"
      :value="data"
    />
  </Layout>
</template>

<script>
import Layout from '@/layout/index.vue'
import { mapGetters } from 'vuex'
import { debounce } from '@/utils'

export default {
    components: {
        Layout,
        AuditModal: () => import('./components/AuditModal'),
        DetailModal: () => import('./components/DetailModal'),
        InvoiceModal: () => import('./components/InvoiceModal')
    },
    data() {
        return {
            query: {
                num: 1,
                companyName: undefined,
                companyTitle: undefined,
                invoiceStatus: undefined,
                type: undefined,
                __dateRange$createFrom$createTo: []
            }
        }
    },
    computed: {
        ...mapGetters({
            dict: 'dict/all',
            data: 'invoice/data'
        })
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.handleQuery = debounce(this.handleQuery, 300)
            this.handleQuery()
        },
        handleQuery(query = {}) {
            this.query = { ...this.query, ...query }
            this.$nextTick(() =>
                this.$store.dispatch('invoice/list', { ...this.query })
            )
        },
        handleReset() {
            this.$refs.queryForm.resetFields()
            this.query.num = 1
            this.handleQuery()
        },
        canAudit(row) {
            return row.invoiceStatus == 2
        }
    }
}
</script>
